<template>
  <div class="l-tab-page" style="padding:8px;" >
      <div class="l-rblock" >
        <el-tabs tab-position="left" :stretch="true" @tab-click="handleClick" v-model="activeTab">
            <el-tab-pane lazy name="uncompleted" :label="$t('待办任务')">
              <uncompleted-task  v-if="activeTab == 'uncompleted'" ref="uncompleted"></uncompleted-task>
            </el-tab-pane>
            <el-tab-pane lazy name="create" :label="$t('发起任务')">
              <create-flow  v-if="activeTab == 'create'"  :isChild="true" ></create-flow>
            </el-tab-pane>
            <el-tab-pane lazy name="delegate" :label="$t('委托任务')">
              <delegate-task  v-if="activeTab == 'delegate'"  ref="delegate" ></delegate-task>
            </el-tab-pane>   
            <el-tab-pane lazy name="completed" :label="$t('已办任务')">
              <completed-task  v-if="activeTab == 'completed'"  ref="completed" ></completed-task>
            </el-tab-pane>
            <el-tab-pane lazy name="my" :label="$t('我的流程')">
              <my-task  v-if="activeTab == 'my'"  ref="my"></my-task>
            </el-tab-pane>
            <el-tab-pane lazy name="read" :label="$t('我的传阅')">
              <read-task  v-if="activeTab == 'read'"  ref="read"></read-task>
            </el-tab-pane>
            <el-tab-pane lazy name="draft" :label="$t('我的草稿')">
              <my-draft  v-if="activeTab == 'draft'"  ref="draft"></my-draft>
            </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
import CreateFlow from '../create/index'
import UncompletedTask from './uncompletedTask'
import CompletedTask from './completedTask'
import MyTask from './myTask'
import ReadTask from './readTask'
import MyDraft from './myDraft'
import DelegateTask from './delegateTask'

export default {
  components: {
      CreateFlow,
      UncompletedTask,
      CompletedTask,
      MyTask,
      ReadTask,
      MyDraft,
      DelegateTask
  },
  data () {
    return {
      lr_isPage:true,
      activeTab:'uncompleted'
    }
  },
  computed:{
  },
  mounted () {
    const type = this.$route.query.type
    if(type){
      this.$nextTick(()=>{
        this.activeTab = type
      })
      
      //this.handleClick()
    }
  },
  methods:{   
    handleClick(){
      this.$refs[this.activeTab] && this.$refs[this.activeTab].loadTableData && this.$refs[this.activeTab].loadTableData()
    } 
  }

}
</script>